<template>
	<view class="page">
		<template v-if="token&&isLogin">
			<view class="h45 m-b2">
				<view class="fix-wrap search-tool">
					<view class="search-tool-form">
						<view class="iconfont">&#xe663;</view>
						<input type="text" confirm-type="search" class="key-inp" placeholder="输入设备名称"
							@confirm="setKeyword" />
					</view>
				</view>
			</view>
			<view class="body">
				<template v-if="!loadingState.default">
					<template v-if="list.data.length>0">
						<view class="tool-list-wrap">
							<!-- dev_type==3?item.cameraUuid:item.id,item.NAME||item.device_name||item.cameraName||item.dev_name,dev_type==3?item.onLineStatus:'',item.fwq_type -->
							<view v-for="(item,index) in list.data" :key="index" class="item"
								@click="select_dev(item)">
								<!-- <template v-if="dev_type==3">
									<view v-if="item.onLineStatus==1" class="label on">在线</view>
									<view v-else class="label off">离线</view>
								</template> -->
								<view>{{item.NAME||item.device_name||item.cameraName||item.dev_name}}</view>
							</view>
						</view>
						<loading :loadingState="loadingState"></loading>
					</template>
					<empty v-else>
						<view slot="msg">没有这台设备</view>
					</empty>
				</template>
				<template v-else>
					<loading :loadingState="loadingState"></loading>
				</template>

			</view>
		</template>
	</view>
</template>

<script>
	import loading from '@/components/loading-more.vue'
	import empty from '@/components/empty.vue'
	import {
		getCurrenPage
	} from '@/common/util.js'
	export default {
		name: 'name',
		data() {
			return {
				token: uni.getStorageSync('token'),
				appid: getApp().globalData.appid,
				userInfo: uni.getStorageSync('userInfo'),
				isLogin: false,
				dev_type: '',
				typeid:'',
				params: {
					limit: 20,
					page: 1,
					keywork: '',
				},
				list: {
					data: []
				},
				loginStateUpdate: false,
				loadingState: {
					default: false,
					loading: true,
					completed: false
				},
				city: {
					adcode: '',
				},

			}
		},
		async onLoad(params) {
			console.log(params)
			this.dev_type = params.dev_type;
			this.typeid=params.typeid

			if (this.token) {
				this.isLogin = await this.$loginState('check');
				if (this.isLogin) {
					this.getDeviceList();
				} else {
					this.isLogin = await this.$loginState('reset');
				}
			} 
		},
		async onShow() {
			if (this.loginStateUpdate) {
				this.token = uni.getStorageSync('token');
				this.userInfo = uni.getStorageSync('userInfo');
				this.isLogin = true;
				this.dataInit();
				this.getDeviceList();
				this.loginStateUpdate = false;
			}
			
			if(!this.token&&!this.isLogin){
				this.isLogin=await this.$loginState('reset'); 
			}

		},
		onReachBottom() {
			if (this.loadingState.completed) {
				this.params.page = 0;
				return false
			} else {
				this.params.page++;
				this.getDeviceList();
			}
		},
		methods: {

			dataInit: function() {
				this.list.data = [];
				this.params.page = 1;
				this.loadingState.default = false;
				this.loadingState.loading = true;
				this.loadingState.completed = false;
			},

			// 获取设备列表
			getDeviceList: async function() {
				let res = await this.$api.tool_api.getDeviceList({
					appid: this.appid,
					token: this.token,
					device_type: this.dev_type,
					user_id: this.userInfo.uid,
					page: this.params.page,
					limit: this.params.limit,
					keywork: this.params.keywork,
					adcode: this.city.adcode,
					typeid: this.typeid
				})
				if (res.data.ret == 1000) {
					this.list.data = this.list.data.concat(res.data.data);
					if (res.data.data.length < this.params.limit) {
						this.loadingState.default = false;
						this.loadingState.loading = false;
						this.loadingState.completed = true;
					} else {
						this.loadingState.default = false;
						this.loadingState.loading = true;
					}
				} else if (res.data.ret == 1002) {
					this.loadingState.default = false;
					this.loadingState.loading = false;
					this.loadingState.completed = true;
				}
			},

			setKeyword: function(e) {
				this.params.keywork = e.detail.value;
				this.dataInit();
				this.getDeviceList();
			},


			select_dev: function(item) {
				// id, name, status,fwq_type
				// dev_type==3?item.cameraUuid:item.id,
				// item.NAME||item.device_name||item.cameraName||item.dev_name,
				// dev_type==3?item.onLineStatus:'',
				// item.fwq_type
				// console.log(id, name, fwq_type)
				
				let id,name,fwq_type
				id = this.dev_type==3?item.cameraUuid:item.id
				name = item.NAME||item.device_name||item.cameraName||item.dev_name
				fwq_type = item.fwq_type
				
				let prevPage = getCurrenPage(2);
				prevPage.$vm.select_dev.id = id;
				prevPage.$vm.select_dev.name = name;
				prevPage.$vm.select_dev.fwq_type = fwq_type;
				prevPage.$vm.select_dev.type = item.type;
				prevPage.$vm.select_dev.update = true;
				if (this.dev_type == 3) {
					prevPage.$vm.select_dev.status = 1;//status;
					if(fwq_type==1){
						return uni.navigateTo({
							url:`/package_jiankong/hk_jiankong/hk_jiankong?dev_name=${name}&dev_id=${id}`
						})
					}
				}
				uni.navigateBack({
					delta: 1
				})
			}
		},
		components: {
			empty,
			loading
		},
		computed: {

		},
		watch: {

		}

	}
</script>

<style lang="less">
	.search-tool-form {
		margin: 7px 10px;
		height: 30px;
		border: 2rpx solid #ddd;
		background: #f2f2f2;
		border-radius: 38rpx;
		display: flex;
		flex-grow: 2;

		.iconfont {
			width: 60rpx;
			text-align: center;
			line-height: 60rpx;
			color: #999;
			font-size: 44rpx;
		}

		.key-inp {
			height: 60rpx;
			line-height: 60rpx;
			font-size: 28rpx;
			color: #666;
			flex-grow: 2;
		}
	}

	.tool-list-wrap {
		margin-bottom: 20rpx;
		padding-left: 20rpx;
		background: #fff;

		.item {
			display: flex;
			align-items: center;
			height: 90rpx;
			border-bottom: 2rpx solid #eee;
			font-size: 30rpx;
			color: #333;

			.label {
				margin-right: 10rpx;
				padding: 0 8rpx;
				border-radius: 8rpx;
			}

			.on {
				background: #09f;
				color: #fff;
			}

			.off {
				background: #ccc;
				color: #fff;
			}
		}
	}
</style>
